import React from "react";
import { useState, useEffect } from "react";
import { addStuApi } from "../api/stuApi";
import { useNavigate, useParams } from "react-router-dom";
import { getDetailByIdApi, editStuByIdApi } from "../api/stuApi";

function AddOrEdit(props) {
  const navigate = useNavigate();
  const { id } = useParams();
  //   根据id来判断是否修改
  useEffect(() => {
    if (id) {
      getDetailByIdApi(id).then(({ data }) => {
        setStu(data);
      });
    }
  }, [id]);
  const [stu, setStu] = useState({
    name: "",
    age: "",
    gender: "Male",
    email: "",
    address: "",
    phone: "",
  });
  function updateStuInfo(newInfo, key) {
    if (key === "age" && isNaN(newInfo)) return;
    const newStuInfo = { ...stu };
    newStuInfo[key] = newInfo;
    setStu(newStuInfo);
  }
  function submintStuinfo(e) {
    e.preventDefault();
    for (const key in stu) {
      if (!stu[key]) {
        alert("请完善表单的每一项");
        return;
      }
    }
    if (id) {
      editStuByIdApi(id, stu).then(() => {
        // 发送请求，跳转回首页
        navigate("/home", {
          state: {
            alert: id ? "edit success" : "add success",
            type: "success",
          },
        });
      });
      return;
    }
    addStuApi(stu).then(() => {
      // 发送请求，跳转回首页
      navigate("/home", {
        state: {
          alert: id ? "edit success" : "add success",
          type: "success",
        },
      });
    });
  }
  return (
    <div>
      <div className="container">
        <h1 className="page-header">
          {id ? "Edit Student info" : "Add Student info"}
        </h1>
        <form id="myform" onSubmit={submintStuinfo}>
          <div className="well">
            <div className="form-group">
              <label>user name</label>
              <input
                type="username"
                className="form-control"
                id="username"
                placeholder="please input user name"
                value={stu.name}
                onChange={(e) => updateStuInfo(e.target.value, "name")}
              />
            </div>
            <div className="form-group">
              <label>user age</label>
              <input
                type="number"
                className="form-control"
                id="userAge"
                placeholder="please input user age"
                value={stu.age}
                onChange={(e) => updateStuInfo(e.target.value, "age")}
              />
            </div>
            <div className="form-group">
              <label>user gender</label>
              <select
                className="form-control"
                placeholder="please select gender"
                value={stu.gender}
                onChange={(e) => updateStuInfo(e.target.value, "gender")}
              >
                <option>Male</option>
                <option>Female</option>
              </select>
            </div>
            <div className="form-group">
              <label>address</label>
              <input
                type="text"
                className="form-control"
                id="useraddress"
                placeholder="please input user address"
                value={stu.address}
                onChange={(e) => updateStuInfo(e.target.value, "address")}
              />
            </div>
            <div className="form-group">
              <label>phone</label>
              <input
                type="text"
                className="form-control"
                id="useraddress"
                placeholder="please input user phone"
                value={stu.phone}
                onChange={(e) => updateStuInfo(e.target.value, "phone")}
              />
            </div>
            <div className="form-group">
              <label>email</label>
              <input
                type="email"
                className="form-control"
                id="useraddress"
                placeholder="please input user email"
                value={stu.email}
                onChange={(e) => updateStuInfo(e.target.value, "email")}
              />
            </div>
            <button type="submit" className="btn btn-primary">
              Submit
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default AddOrEdit;
